<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酒店详情页</title>
    <script src="../../js/untils/jquery.min.js"></script>
    <link rel="stylesheet" href="./css/order_writeinfo.css">
    <link href="../../../css/Untils/public.css" rel="stylesheet">

</head>

<body>
<div id="app">
    <!-- ====================1.顶部==================== -->
    <div id="header">

        <!-- logo -->
        <div class="logo">
            <a :href=indexUrl></a>
        </div>

        <!-- 流程图 -->
        <div class="flow">
           <div class="checked_flow f1">1</div>
           <div class="line"></div>
           <div class="unchecked_flow f2">2</div>
           <div class="line"></div>
           <div class="unchecked_flow f3">3</div>
           <div class="f_name">
                <div>提交订单</div>
                <div>支付订单</div>
                <div>完成提交</div>
           </div>
        </div>

        
    </div>

    <!-- ====================2.主体==================== -->
    <div id ="main">
        <form>

        <!-- 左侧分栏 -->
        <div id="leftarea">

            <!-- 预定信息 -->
            <div class="book_info">

                <!-- 入住信息标题 -->
                <p class="info_title">入住信息</p>

                <!-- 房间信息 -->
                <ul class="room_desc">
                    <li class="name">{{room_Typename}}</li>
                    <li>可入住{{room_contain_num}}人</li>
                </ul>

                <!-- 入住日期 -->
                <div class="calender">
                    <span class="icon-box">
                        <i class="icon">
                            <!-- <el-date-picker
                                style="border-top: none;border-bottom: none;border-radius: 0;margin-bottom: 2px;border: none;"
                                v-model="mydate" type="daterange" range-separator="至"
                                start-placeholder="入住日期" end-placeholder="退房日期"
                                value-format="yyyy-MM-dd">
                            </el-date-picker> -->
                        </i>
                    </span>
                    <span class="from_to">
                        <span >{{mydate[0]}}</span>
                    <span id="toChar">到</span>
                    <span>{{mydate[1]}}</span>
                    </span>
                    <span class="total">共<span id="total_num">{{day_num}}</span>晚</span>
                </div>

                <br>
                <!-- 房费详情 -->
                <div class="roomcost_detail">
                    <span class="infoname">房费</span>
                    <ul>
                        <li v-for="(item,i) in days">
                            <div class="date">{{days[i]}}</div>
                            <div class="cost" v-if="i != days.length-1">￥{{roomLeastPrice}}</div>
                            <div class="hasbreakfast" v-if="i == days.length-1">退房</div>
                        </li>

                    </ul>
                </div>



                <!-- 房间间数 -->
                <!-- <div class="bookedroom">
                    <span class="infoname">预定间数</span>
                    <ul>
                        <li><button>1间</button></li>
                        <li><button>2间</button></li>
                    </ul>
                    
                </div> -->

                <!-- 住客信息 -->
                <div class="tenant_info" id="tenant">
                    <div><label id="indexinfo">房间</label></div>
                    <ul>
                        <li v-for="(item,i) in tenants">
                            <span class="tenant">入住人{{i+1}}</span>
                            <input type="text" class="tenant_name" placeholder="入住人姓名" @change="tenantName(i,$event)"/>
                            <div class="tenant_btns">
                                <span class="addbtn_tenant" @click="addBtn($event)">添加入住人</span>
                                <span class="delbtn_tenant" @click="delBtn(i)">删除入住人</span>
                            </div>
                            <br>
                            <input type="text" class="tenant_telno" placeholder="填写入住人的手机号" @change="tenantTelno(i,$event)"/>
                            <input type="text" class="tenant_idCard" placeholder="填写入住人的身份证号" @change="tenantIdCard(i,$event)"/>
                        </li>
                    </ul>
                </div>

                <!-- 联系电话 -->
                <div class="telinfo">
                    <span>手机号</span>
                    <input type="text" class="areano" value="0086" />
                    <input type="text" class="telno" placeholder="用于接收短信通知"/>
                </div>
                <div style="font: 0px/0px sans-serif;clear: both;display: block;margin-bottom: 20px;"> </div>


            </div>

            <!-- 温馨提示 -->
            <div class="tips">
                <div id="cost-tip">
                    <span class="title">扣款说明:</span>
                    <div class="content">
                        订单确认后不可取消，如未入住或取消及提前离店，途牛将收取¥1320支付酒店。
                    </div>
                </div>
                <div id="hotel-tip">
                    <span class="title">酒店提示:</span>
                    <div class="content">
                        <ul>
                            <li>
                                1、为贯彻落实《上海市生活垃圾管理条例》相关规定，推进生活垃圾源头减量，上海市文化和旅游局特制定《关于本市旅游住宿业不主动提供客房一次性日用品的实施意见》，2019年7月1日起，上海市旅游住宿业将不再主动提供牙刷、梳子、浴擦、剃须刀、指甲锉、鞋擦这些一次性日用品。若需要可咨询酒店。
                            </li>
                            <li>
                                2、已确认的预订不允许更改姓名，酒店前台入住手续需由第一位预订姓名的本人到场办理。
                            </li>
                            <li>
                                3、携带未成年人入住需要提供户口簿等有效证件。
                            </li>
                            <li>
                                4、酒店有提供地铁站到酒店的班车服务，服务时间：6：45-23：00，20分钟一班，详情请咨询酒店，联系方式：021-20998003。
                            </li>
                            <li>
                                5、【疫情防控要求】所有游客进入上海迪士尼度假区须遵循度假区的疫情防控要求。另外，当游客每次进入上海迪士尼度假区的酒店时，包括同行者中的每一位且无论年龄，均必须持有绿色“随申码”及48小时内（从检测时间起算）核酸检测阴性证明并扫描“场所码”。完成“场所码”扫描并持有绿色“随申码”及48小时内核酸检测阴性证明的游客才被允许进入度假区的酒店。根据政府部门对旅游住宿行业场所的防疫要求，持有48小时内核酸检测阴性证明是一项必须要求，因此仅持有24小时内核酸采样证明而无48小时内核酸检测阴性证明的游客将不能进入度假区的酒店。当您在前台或行政酒廊办理入住时，所有入住游客还需出示绿色“通信大数据行程卡（行程卡）”，并如实填写《旅行信息登记表》。如果您未能完成“场所码”扫描、未能出示绿色“随申码”及48小时内核酸检测阴性证明、未能出示绿色“行程卡”，或者在抵达上海迪士尼度假区酒店前七天来自或途经国内新冠肺炎疫情中高风险地区，可能无法入住度假区的酒店。根据相关政府要求，如您在入住期间出现发热或者伴随发热出现咳嗽、咳痰、流鼻涕 、咽喉痛、胸痛胸闷等症状，您将被要求前往医院的发热门诊就诊。
                            </li>
                            <li>
                                6、为贯彻落实《上海市生活垃圾管理条例》相关规定，推进生活垃圾源头减少，上海市文化和旅游局特制定《关于本市旅游住宿业不主动提供客房一次性日用品的实施意见》，自2019年7月1日起，上海市旅游住宿业将不再主动提供牙刷、梳子、浴擦、剃须刀、指甲锉、鞋擦这些一次性用品。如需要可咨询酒店。感谢您的理解，我们也诚邀您一起加入环保事业，助力环境的可持续发展”。
                            </li>
                        </ul>
                    </span>
                </div>
                <div id="care-tip">
                    <span class="title">温馨提示:</span>
                    <div class="content">
                    <ul>
                        <li>
                            1、儿童（18岁以下）不能在没有大人的陪同下独自入住。10岁及以下的儿童与父母同住，免费使用现有床铺。儿童和成人的总入住人数不能超过房间最大入住人数，除非加床。
                        </li>
                        <li>
                            2、实际入住客人数不可超过房间最大容量数。加床和婴儿床的要求均需提前申请并须获得酒店的确认。
                        </li>
                        <li>
                            3、同一入住时间段，每位宾客最多可预订3间客房。主入住宾客必须本人登记入住酒店，并且不可更改姓名。
                        </li>
                        <li>
                            4、请在规定的入住时间办理入住，若入住当日宾客未办理入住（即未按照预订的入住日期办理入住），则宾客的预订将自动取消，且费用不可退。
                        </li>
                    </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- 同意条款 -->
        <div class="agree">
            <input class="agree_check" type="checkbox" v-model="is_agree"/>
            <span>提交订单表我已阅读并接受</span>
            <a>《酒店预订须知》</a>
        </div>

        <!-- 支付按钮 -->
        <!-- :href="'http://localhost:8080/create?finalPrice='+finalPrice+'&title='+'酒店订单支付'" -->
        <div class="topay">
            <a class="active"  v-if = "is_agree" @click="topay()" >
                <label class="btnlabel">去支付（￥</label>
                <span class="costmoney btnspan">{{finalPrice}}</span>
                <label class="btnlabel">）</label>
            </a>
            <a class="disabled" v-if = "!is_agree">
                <label class="btnlabel">去支付（￥</label>
                <span class="costmoney btnspan">{{finalPrice}}</span>
                <label class="btnlabel">）</label>
            </a>
        </div>
        </div>


        <div id="rightarea">
            <div class="hotel-msg">
                <div class="hotel-pic">
                    <img :src=hotel_info.hotelShowImg class="hotel-image">
                </div>
                <div class="hotel-name">{{hotel_info.hotelName}}</div>
            </div>

            <div class="cost-msg">
                <div class="cost-roomcost">
                    <span class="title">房费</span>
                    <!-- <label class="date">2022-08-22</label> -->
                    <label class="perroom">￥{{roomLeastPrice}}</label>
                    <label class="roomnum">x {{days.length-1}} 天 =</label>
                    <label class="perroom">￥{{roomLeastPrice*(days.length-1)}}</label>
                </div>
                <div class="cost-discount">
                    <span class="title">优惠</span>
                    <select v-model="selectdisend" @change="selectdis($event)" style="width:200px;height: 30px;margin-top: 5px;margin-bottom: 5px;margin-left: 10px">
                        <option value="NONE">请选择折扣券</option>
                        <option v-for="item in couponListA" v-bind:value="item.couponNo" v-text="item.couponName+item.couponDiscount+'折'" ></option>
                    </select>
                    <select v-model="selectfullend" @change="selectfull($event)" style="width:200px;height: 30px;margin-top: 5px;margin-bottom: 5px;margin-left: 10px">
                        <option value="NONE">请选择满减券</option>
                        <option v-for="item in couponListB" v-bind:value="item.couponNo" v-text="item.couponName+' 满'+item.couponFullPrice+'元减'+item.couponPrice+'元'" ></option>
                    </select>
                </div>
                
                <div class="cost-onlinepay">
                    <span class="title">在线支付</span>
                    <label class="totalcost">￥{{finalPrice}}</label>
                    <label class="total">共</label>
                </div>
            </div>
        </div>
        </form>
    </div>
    <div id="div" v-if="paying" style="height: 50%; width: 50%; display: block; position: fixed; top: 25%; left: 25%; border: black solid 1%; background-color: #ababab;">
        <p style="display: block; height: 300px; line-height: 180px ; text-align: center ; font-size: 100px; color: #fff;">正在支付中</br>...</p>
    </div>

</div>
<!--引用vue-->
<script src="../../js/untils/vue.js"></script>
<script src="../../js/untils/axios-0.18.0.js"></script>
<script src="../../js/untils/index.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>

    new Vue({
        el:'#app',
        data(){
            return{
                indexUrl:null,
                socket:null,
                paying:false,
                admin:null, //用户信息
                phone:null,
                tenants:[{tenantName:null,tenantTelno:null,tenantIdcard:null}], //该订单添加的入住人
                start_date: null, //入住日期 Date格式
                end_date: null, //退房日期 Date格式
                mydate:[],  //[0]入住日期 [1]退房日期
                days:[],    //入住期间 每一天的日期[月-日]
                hotel_id:null,  //酒店Id
                hotelName:null,  //酒店Id
                room_Type:null, //房间类型名
                room_contain_num:null,  //房间可容纳人数
                roomLeastPrice:0,   //房间起始价格
                day_num:null,   //入住天数
                is_agree:false, //是否勾选同意条款
                selectdisend:"NONE",    //被选中的折扣券 在下拉选择框中的value
                selectfullend:"NONE",   //被选中的满减券 在下拉选择框中的value
                couponListA:[], //用户持有的可用折扣券列表
                couponListB:[], //用户持有的可用满减券列表
                selectedA:null, //本次消费选用的折扣券
                selectedB:null, //本次消费选用的满减券
                finalPrice:0,   //最终应付价格
                timer: null,     //计时器
                hotel_info: null    //酒店信息
            }
        },
        methods:{
            //websocket
            init() {
                if (typeof (WebSocket) === "undefined") alert("您的浏览器不支持websocket")
                else {
                    // 实例化socket
                    this.socket = new WebSocket("ws://localhost:8080/testWebSocket/" + this.admin.userId)

                    // 监听socket连接
                    this.socket.onopen = this.open
                    // 监听socket错误信息
                    this.socket.onerror = this.error
                    // 监听socket消息
                    this.socket.onmessage = this.getMessage
                }
            },
            open: function () {
                console.log("socket连接成功")
            },
            error: function () {
                console.log("连接错误")
            },
            getMessage: function (msg) {
                window.localStorage.removeItem("hotelId")
                window.localStorage.removeItem("room_Typename")
                window.localStorage.removeItem("room_Type")
                window.localStorage.removeItem("room_contain_num")
                window.localStorage.removeItem("start_date")
                window.localStorage.removeItem("end_date")
                window.localStorage.removeItem("roomLeastPrice")
                //前端接收到订单支付成功的消息，跳转到订单流水页面
                var message = JSON.parse(msg.data)
                localStorage.setItem("orderNo",message.orderNo) //订单号
                localStorage.setItem("flowNo",message.flowNo)   //流水号
                localStorage.setItem("paytime",message.paytime) //支付时间
                localStorage.setItem("finalPrice",message.finalPrice)   //最终价格
                location.href="payover.html?phone="+this.phone
            },
            send: function () {
                this.socket.send(params)
            },
            close: function () {
                console.log("socket已经关闭")
            }, 
            //增加入住人
            addBtn(){
                if(this.tenants.length<this.room_contain_num){
                    this.tenants.push(0);
                    this.tenants[this.tenants.length-1]={
                        tenantName:null,tenantTelno:null,tenantIdCard:null
                    }
                }
                else
                    alert("该房间最多只能容纳"+this.room_contain_num+"人")
            },
            //删除入住人
            delBtn(i){
                if(this.tenants.length>1)
                    this.tenants.splice(i,1)
                else
                    alert("请填写入住人")
            },
            //从页面收集入住人的 姓名、电话号码、身份证号码
            tenantName(i,event){
                this.tenants[i].tenantName=event.target.value
            },
            tenantTelno(i,event){
                this.tenants[i].tenantTelno=event.target.value
            },
            tenantIdCard(i,event){
                this.tenants[i].tenantIdcard=event.target.value
                // console.log(this.tenants[i])
            },
            //计算经过优惠后的最终应付价格
            calcuFinal(){
                if(this.selectedA!=null){
                    if(this.selectedB!=null){
                        var a = this.roomLeastPrice*(this.days.length-1)*(this.selectedA.couponDiscount/10)-(this.selectedB.couponPrice)
                        var b = (this.roomLeastPrice*(this.days.length-1)-(this.selectedB.couponPrice))*(this.selectedA.couponDiscount/10)
                        this.finalPrice = (a>b)?b:a
                    }
                    else
                        this.finalPrice = this.roomLeastPrice*(this.days.length-1)*(this.selectedA.couponDiscount/10)
                }
                else{
                    if(this.selectedB!=null)
                        this.finalPrice = this.roomLeastPrice*(this.days.length-1)-(this.selectedB.couponPrice)
                    else
                        this.finalPrice = this.roomLeastPrice*(this.days.length-1)
                }
                this.finalPrice = this.finalPrice.toFixed(2)
            },
            //选择折扣券
            selectdis(event){
                if (event.target.value == "NONE"){
                    this.selectedA = null
                    this.calcuFinal()
                    return
                }
                for(var i=0;i<this.couponListA.length;i++){
                    if(this.couponListA[i].couponNo == event.target.value){
                        this.selectedA = this.couponListA[i]
                    }
                }
                if(this.selectedB!=null&&(parseFloat(this.finalPrice)+this.selectedB.couponPrice)*(this.selectedA.couponDiscount/10) < this.selectedB.couponFullPrice){
                    alert("使用该券后，无法使用"+this.selectedB.couponName)
                    this.selectdisend = "NONE";
                    this.selectedA = null
                    return
                }
                this.calcuFinal()
            }, 
            //选择满减券
            selectfull(event){
                if (event.target.value == "NONE"){
                    this.selectedB = null
                    this.calcuFinal()
                    return
                }
                for(var i=0;i<this.couponListB.length;i++){
                    if(this.couponListB[i].couponNo == event.target.value){
                        this.selectedB = this.couponListB[i]
                    }
                }
                if(this.finalPrice < this.selectedB.couponFullPrice){
                            alert("未达到满减条件")
                            this.selectfullend = "NONE";
                            this.selectedB = null
                            return
                }
                this.calcuFinal()
            },
            //打开支付宝页面 并向后端发送创建订单的请求
            topay(){
                if(this.selectedA)
                
                var that=this
                var originPrice = this.originPrice
                var finalPrice = this.finalPrice
                //订单信息对象
                var couponANo="null";
                var couponBNo="null";
                if(this.selectedA!=null)
                    couponANo = this.selectedA.couponNo;
                if(this.selectedB!=null)
                    couponBNo = this.selectedB.couponNo;
                var order={
                    hotelId:this.hotel_id,
                    hotelName:this.hotelName,
                    cheakInDate:this.start_date,
                    cheakOutDate:this.end_date,
                    orderPrice:finalPrice,
                    userId:this.admin.userId,
                    roomType:this.room_Typename,
                    standby01:couponANo,
                    standby02:couponBNo,
                }

                // console.log(this.admin.userId)
                // console.log(order)
                //房间信息对象
                var room={
                    hotelId:this.hotel_id,
                    roomTypeId:this.room_Type
                }
                //要求填写入住人信息
                for(var i=0;i<this.tenants.length;i++){
                    if(this.tenants[i].tenantName==null||this.tenants[i].tenantTelno==null||this.tenants[i].tenantIdcard==null){
                        alert("请完整填写填写入住人信息!");
                        return;
                    }
                }
                //封装信息 作为临时类
                var temp ={
                    order:order,
                    roomInfo:room,
                    tenantList:this.tenants
                }
                console.log(temp)
                //发送创建订单请求
                var orderId=null;
                axios({
                    method:"post",
                    url:"http://localhost:8080/customerOrder/saveOrder",
                    data:temp
                }).then(function(resp){
                    console.log(resp.data)
                    if(resp.data.code == 200){
                        orderNo = resp.data.data
                        // console.log(orderNo)
                        this.paying = true;
                        window.open("http://localhost:8080/create?originPrice="+originPrice
                        +"&finalPrice="+finalPrice
                        +"&title=酒店订单支付&orderNo="+orderNo
                        +"&coupousANo="+couponANo
                        +"&coupousBNo="+couponBNo)
                    }else{
                        alert("该房间已被占用，请返回详情页面重试")
                        return
                    }
                })
   
            }
        },

        // 钩子函数
        created() {

            //从缓存中拿取需要的数据
            this.hotel_id = window.localStorage.getItem("hotelId") //酒店Id
            this.hotelName = window.localStorage.getItem("hotelName") //酒店名称
            // console.log(this.hotel_id)
            this.room_Typename = window.localStorage.getItem("room_Typename")   //房间类型
            this.room_Type = window.localStorage.getItem("room_Type")   //房间类型Id
            this.room_contain_num = parseInt(window.localStorage.getItem("room_contain_num"))   //房间最大容纳人数
            this.mydate=[window.localStorage.getItem("start_date"),window.localStorage.getItem("end_date")] //入住时间和退房时间
            this.roomLeastPrice = window.localStorage.getItem("roomLeastPrice") //房间每天所需花费的最低金额

            let start_date = ""
            let end_date = ""


            //将入住时间和退房时间转为Date格式
            if(this.mydate[0]==null||this.mydate[1]==null){
                let myDate = new Date();
                start_Date = myDate.toISOString().slice(0, 10)
                myDate.setDate(myDate.getDate() + 1);
                end_date = myDate.toISOString().slice(0, 10) 
            }else{
                start_date = new Date(this.mydate[0])
                end_date = new Date(this.mydate[1])
            }

            this.start_date = start_date
            this.end_date = end_date



            //算得总的住宿时间
            var day_num = Math.abs(start_date - end_date)/ 1000 / 60 / 60 / 24
            this.day_num = parseInt(day_num)

            //取出住宿期间每天的 月-日 格式
            day = start_date
            for(var i=0;i<=this.day_num;i++){
                let d = new Date()
                d.setTime(start_date.getTime() + i*60*60*1000*24)
                let date = new Date(d);
                this.days[i] = (date.getMonth()+1)+"-"+(date.getDate())
            }
            

            //取得初始金额
            this.originPrice=this.roomLeastPrice*(this.day_num)
            this.finalPrice=this.originPrice

            //获取用户数据
            var url = decodeURI(window.location.href);
            // console.log(url)
            let str = url.split("?")[1].split("&")
            let phone = str[0].split("=")[1]
            this.phone = phone
            this.indexUrl = "../index/index.html?phone=" + phone
            // console.log("本地缓存:"+JSON.parse(window.localStorage.getItem(phone)))
            this.admin = JSON.parse(localStorage.getItem(phone))
            // console.log(this.admin)
        },
        //页面初始化之后执行查询操作获取json数据
        mounted() {
            var that = this
            //异步请求 查询当前登录的用户的 优惠券列表
            console.log(that.admin)
            var couponList = []
            axios({
                method:"GET",
                url:"http://localhost:8080/customerUserCoupon/notUseCouponList/"+that.admin.userId,
            }).then(function(resp){
                couponList = resp.data.data
                console.log(couponList)
            })

            //请求需要时间，先延迟一段时间再查询获取优惠券详情信息
            clearTimeout(this.timer);  //清除延迟执行
 
            this.timer = setTimeout(()=>{   //设置延迟执行
                //获取优惠券的详情信息
                for(var i=0;i<couponList.length;i++){
                    axios({
                        method:"GET",
                        url:"http://localhost:8080/couponStock/getByCouponNo/"+couponList[i].couponNo,
                    }).then(function(resp){
                        var coupon = resp.data.data
                        //判断优惠券是折扣券还是满减券 折扣券放到 优惠券A组 ；满减券放到 优惠券B组 
                        if(coupon.couponName=="折扣券"){
                            that.couponListA.push(coupon);
                        } else if(coupon.couponName=="满减券"){
                            that.couponListB.push(coupon);
                        }
                    })
                }
            },300);

            axios({
                method: "GET",
                url: "http://localhost:8080/hotel/getById?id=" + this.hotel_id,
            }).then(function (resp) {
                that.hotel_info = resp.data.data
            })

            
            
            this.init();
        }, 
        
    })
</script>
</body>
</html>